<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
    <!-- Use Chrome Frame in IE -->
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
    />
    <meta
      name="description"
      content="Demonstrates use cases for a batch table hierarchy."
    />
    <meta name="cesium-sandcastle-labels" content="3D Tiles" />
    <title>Cesium Demo</title>
    <script type="text/javascript" src="../Sandcastle-header.js"></script>
    <script
      type="text/javascript"
      src="../../../Build/CesiumUnminified/Cesium.js"
      nomodule
    ></script>
    <script type="module" src="../load-cesium-es6.js"></script>
  </head>
  <body
    class="sandcastle-loading"
    data-sandcastle-bucket="bucket-requirejs.html"
  >
    <style>
      @import url(../templates/bucket.css);
      #toolbar button {
        display: block;
      }
    </style>
    <div id="cesiumContainer" class="fullSize"></div>
    <div id="loadingOverlay"><h1>Loading...</h1></div>
    <div id="toolbar"></div>
    <script id="cesium_sandcastle_script">
      function startup(Cesium) {
        "use strict";
        //Sandcastle_Begin

        // Doorknobs, doors, roofs, and walls are styled with the batch table hierarchy.
        // Since buildings and zones are not backed by geometry they are not styled directly. However
        // styles may be written that take building and zone properties into account.
        //
        // Hierarchy layout (doorknobs are children of doors):
        //
        //   zone0
        //     building0
        //       roof0
        //       wall0
        //       door0 - doorknob0
        //       door1 - doorknob1
        //       door2 - doorknob2
        //       door3 - doorknob3
        //     building1
        //       roof1
        //       wall1
        //       door4 - doorknob4
        //       door5 - doorknob5
        //       door6 - doorknob6
        //       door7 - doorknob7
        //     building2
        //       roof2
        //       wall2
        //       door8 - doorknob8
        //       door9 - doorknob9
        //       door10 - doorknob10
        //       door11 - doorknob11
        //
        // Class properties:
        //
        //   zone:
        //     * zone_building
        //     * zone_name
        //   building:
        //     * building_area
        //     * building_name
        //   wall:
        //     * wall_paint
        //     * wall_windows
        //     * wall_name
        //   roof:
        //     * roof_paint
        //     * roof_name
        //   door:
        //     * door_mass
        //     * door_width
        //     * door_name
        //   doorknob:
        //     * doorknob_size
        //     * doorknob_name

        var viewer = new Cesium.Viewer("cesiumContainer");
        viewer.clock.currentTime = new Cesium.JulianDate(2457522.154792);

        var tileset = new Cesium.Cesium3DTileset({
          url:
            "../../SampleData/Cesium3DTiles/Hierarchy/BatchTableHierarchy/tileset.json",
        });

        viewer.scene.primitives.add(tileset);
        viewer.zoomTo(tileset, new Cesium.HeadingPitchRange(0.0, -0.3, 0.0));

        var styles = [];
        function addStyle(name, style) {
          styles.push({
            name: name,
            style: style,
          });
        }

        addStyle("No style", {});

        addStyle("Color by building", {
          color: {
            conditions: [
              ["${building_name} === 'building0'", "color('purple')"],
              ["${building_name} === 'building1'", "color('red')"],
              ["${building_name} === 'building2'", "color('orange')"],
              ["true", "color('blue')"],
            ],
          },
        });

        addStyle("Color all doors", {
          color: {
            conditions: [
              ["isExactClass('door')", "color('orange')"],
              ["true", "color('white')"],
            ],
          },
        });

        addStyle("Color all features derived from door", {
          color: {
            conditions: [
              ["isClass('door')", "color('orange')"],
              ["true", "color('white')"],
            ],
          },
        });

        addStyle("Color features by class name", {
          defines: {
            suffix: "regExp('door(.*)').exec(getExactClassName())",
          },
          color: {
            conditions: [
              ["${suffix} === 'knob'", "color('yellow')"],
              ["${suffix} === ''", "color('lime')"],
              ["${suffix} === null", "color('gray')"],
              ["true", "color('blue')"],
            ],
          },
        });

        addStyle("Style by height", {
          color: {
            conditions: [
              ["${height} >= 10", "color('purple')"],
              ["${height} >= 6", "color('red')"],
              ["${height} >= 5", "color('orange')"],
              ["true", "color('blue')"],
            ],
          },
        });

        function setStyle(style) {
          return function () {
            tileset.style = new Cesium.Cesium3DTileStyle(style);
          };
        }

        var styleOptions = [];
        for (var i = 0; i < styles.length; ++i) {
          var style = styles[i];
          styleOptions.push({
            text: style.name,
            onselect: setStyle(style.style),
          });
        }

        Sandcastle.addToolbarMenu(styleOptions);

        var handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);

        // When a feature is left clicked, print its class name and properties
        handler.setInputAction(function (movement) {
          var feature = viewer.scene.pick(movement.position);
          if (!Cesium.defined(feature)) {
            return;
          }
          console.log("Class: " + feature.getExactClassName());
          console.log("Properties:");
          var propertyNames = feature.getPropertyNames();
          var length = propertyNames.length;
          for (var i = 0; i < length; ++i) {
            var name = propertyNames[i];
            var value = feature.getProperty(name);
            console.log("  " + name + ": " + value);
          }
        }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

        // When a feature is middle clicked, hide it
        handler.setInputAction(function (movement) {
          var feature = viewer.scene.pick(movement.position);
          if (!Cesium.defined(feature)) {
            return;
          }
          feature.show = false;
        }, Cesium.ScreenSpaceEventType.MIDDLE_CLICK);
        //Sandcastle_End
        Sandcastle.finishedLoading();
      }
      if (typeof Cesium !== "undefined") {
        window.startupCalled = true;
        startup(Cesium);
      }
    </script>
  </body>
</html>
